import React, {useContext, useEffect} from "react";
import {Overlay} from "react-native-elements";
import {Dimensions, ImageBackground, View, Text, TouchableOpacity, StyleSheet} from "react-native";
import {TouchableHighlight} from "react-native-gesture-handler";
import blueLogo from "../assets/chat/blueLogo.png"
import redLogo from "../assets/chat/redLogo.png"
import tranSuccess from "../assets/chat/tranSuccess.png"
import traning from "../assets/chat/traning.png"
import tranFalse from "../assets/chat/tranFalse.png"
import {timeFormat} from "../libs/helpers";
import Clipboard from "@react-native-community/clipboard";
import Toast from "react-native-simple-toast";
import LocaleContext from "../libs/locale";

const {width, height} = Dimensions.get("window");

const ChatTranDetail = ({addressIn,addressOut,timeStamp,blockHeight,hash,msg,visible,back,navigation}:any) => {
    const locale:any = useContext(LocaleContext);
    const onCopy = (data:any) => {
        Clipboard.setString(data.toString());
        Toast.show(locale?._('copied') as string);
    };

    return(
        (visible !== false)?(
            <View style={styles.body}>
                <View style={styles.container}>
                    <View style={styles.head}>
                        <View style={{justifyContent:"flex-start",flexDirection:"row",alignItems:"center"}}>
                            <ImageBackground source={blockHeight>0?blueLogo:redLogo} style={{width:width/360*17,height:width/360*17}}/>
                            <Text style={{fontSize:width/360*17,marginLeft:10,fontWeight:"bold"}}>
                                {blockHeight>0?"交易成功":(blockHeight==-1?"交易进行中":"交易未成功")}
                            </Text>
                        </View>
                        <View style={{flex:1,flexDirection:"row",justifyContent:"flex-end"}}>
                            <TouchableHighlight
                                underlayColor={""}
                                onPress={()=>{
                                    back(false);
                                }}
                            >
                                <Text style={{color:"#D2D4DA",fontSize:width/360*35,marginTop:-width/360*13}}>
                                    ×
                                </Text>
                            </TouchableHighlight>
                        </View>
                    </View>
                    <View style={styles.tranCount}>
                        <Text style={{color:"red",fontWeight:"bold",fontSize:width/360*25,lineHeight:width/360*25}}>
                            -0.002
                        </Text>
                        <Text style={{color:"red",fontWeight:"bold",lineHeight:width/360*21,fontSize:width/360*12,alignSelf:"flex-end",marginLeft:5}}>
                            SAT
                        </Text>
                    </View>
                    <View style={styles.tranAddress}>
                        <View style={{justifyContent:"flex-start",flexDirection:"row",alignItems:"center"}}>
                            <ImageBackground source={blockHeight>0?tranSuccess:(blockHeight==-1?traning:tranFalse)} style={{width:width/360*24,height:width/360*24,marginLeft:width*0.05}}/>
                        </View>
                        <View style={{alignItems:"flex-start",flexDirection:"column",paddingLeft:width*0.05}}>
                            <Text style={{color:"#AFB2BD",fontSize:width/360*10,paddingTop:width/360*10,paddingBottom:width/360*2}}>
                                收款账号
                            </Text>
                            <TouchableOpacity onPress={()=>{onCopy(addressOut)}}>
                                <Text style={{fontSize:width/360*9,fontWeight:"bold",paddingTop:width/360*2,paddingBottom:width/360*2}}>
                                    {addressOut}
                                </Text>
                            </TouchableOpacity>
                            <Text style={{color:"#AFB2BD",fontSize:width/360*10,paddingTop:width/360*7,paddingBottom:width/360*2}}>
                                付款账号
                            </Text>
                            <TouchableOpacity onPress={()=>{onCopy(addressIn)}}>
                                <Text style={{fontSize:width/360*9,fontWeight:"bold",paddingTop:width/360*2,paddingBottom:width/360*10}}>
                                    {addressIn}
                                </Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={styles.tranGas}>
                        <Text style={{paddingLeft:width*0.03,fontSize:width/360*8,color:"#F3186B"}}>
                            已支付网络费用
                        </Text>
                        <View style={{flexDirection:"row",flex:1,justifyContent:"flex-end",marginRight:width*0.03}}>
                            <Text style={{fontSize:width/360*8,color:"#F3186B"}}>
                                0.002
                            </Text>
                            <Text style={{alignSelf:"flex-end",fontSize:width/360*8,color:"#F3186B"}}>
                                SAT
                            </Text>
                        </View>
                    </View>
                    <View style={styles.tranDetail}>
                        {/*交易时间与区块号（交易高度）*/}
                        <View style={{flexDirection:"row",alignItems:"center"}}>
                            <View >
                                <Text style={styles.tranSmallTitle}>
                                    交易时间 ({timeStamp})
                                </Text>
                                <TouchableOpacity onPress={()=>{onCopy(timeStamp)}}>
                                    <Text style={styles.tranSmallInfo}>
                                        {timeFormat(timeStamp)}
                                    </Text>
                                </TouchableOpacity>
                            </View>
                            <View style={{flex:1,marginLeft:width*0.2}}>
                                <Text style={styles.tranSmallTitle}>
                                    区块号
                                </Text>
                                <TouchableOpacity onPress={()=>{onCopy(blockHeight)}}>
                                    <Text style={styles.tranSmallInfo}>
                                        {blockHeight}
                                    </Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                        {/*交易hash */}
                        <View style={{marginTop:height*0.005}}>
                            <Text style={styles.tranSmallTitle}>
                                交易号
                            </Text>
                            <Text style={styles.tranSmallInfo}>
                                {hash}
                            </Text>
                        </View>
                        {/*交易数据（data） */}
                        <View style={{marginTop:height*0.005}}>
                            <Text style={styles.tranSmallTitle}>
                                交易数据
                            </Text>
                            <Text style={styles.tranSmallInfo}>
                                暂无
                            </Text>
                        </View>
                    </View>
                    <View style={styles.tranView}>
                        {/*备注 */}
                        <View style={{}}>
                            <Text style={styles.tranSmallTitle}>
                                备注
                            </Text>
                            <TouchableOpacity onPress={()=>{onCopy(msg)}}>
                                <Text style={styles.tranSmallInfo} numberOfLines={1}>
                                    {msg}
                                </Text>
                            </TouchableOpacity>
                        </View>
                        {/*区块浏览器 */}
                        <View style={{marginTop:height*0.005}} >
                            <Text style={styles.tranSmallTitle}>
                                区块浏览器
                            </Text>
                            <TouchableOpacity onPress={()=>{navigation.navigate('WebBrowserInfo',{url:("https://explore.smartx.one/TransactionDetails?hash="+hash),showExplore:true})}}>
                                <Text style={styles.tranSmallInfo} numberOfLines={2} >
                                    https://explore.smartx.one/TransactionDetails?hash={hash}
                                </Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </View>)
            :null
    )
};
const styles = StyleSheet.create({
    body:{
        marginTop:-height,
        height:height,
        width:width,
        backgroundColor:"#0000009E",
        alignItems:"center",
    },
    container:{
        marginTop:height*0.15,
        borderRadius:width*0.02,
        paddingBottom:height*0.02,
        width:width*0.8,
        backgroundColor:"#F5F6F7",
        marginLeft:width*0.05
    },
    head:{
        height:height*0.1,
        width:width*0.8,
        flexDirection:"row",
        padding:width*0.04,
        paddingLeft:width*0.06
    },
    tranCount:{
        marginBottom:height*0.02,
        justifyContent:"center",
        flexDirection:"row",
    },
    tranAddress:{
        alignSelf:"center",
        width:width*0.7,
        marginBottom:height*0.04,
        backgroundColor:"#fff",
        borderRadius:width*0.03,
        borderBottomRightRadius:0,
        borderBottomLeftRadius:0,
        flexDirection:"row"
    },
    tranGas:{
        alignItems:"center",
        flexDirection:"row",
        height:height*0.04,
        marginBottom:height*0.015,
        backgroundColor:"#F5E0E8",
        width:width*0.7,
        alignSelf:"center",
        borderBottomLeftRadius:width*0.03,
        borderBottomRightRadius:width*0.03,
        marginTop:-(height*0.04)
    },
    tranSmallTitle:{
        fontSize:width/360*9,
        fontWeight:"bold",
        paddingTop:width/360*2,
        paddingBottom:width/360*2,
        color:"#AFB2BD"
    },
    tranSmallInfo:{
        fontSize:width/360*9,
        fontWeight:"bold",
        paddingTop:width/360*2,
        paddingBottom:width/360*2,
        minHeight:width/360*9
    },
    tranDetail:{
        alignSelf:"center",
        width:width*0.7,
        marginBottom:height*0.015,
        backgroundColor:"#fff",
        borderRadius:width*0.03,
        padding:width*0.04,
        flexDirection:"column"
    },
    tranView:{
        alignSelf:"center",
        width:width*0.7,
        marginBottom:height*0.01,
        backgroundColor:"#fff",
        borderRadius:width*0.03,
        padding:width*0.04,
        paddingBottom:height*0.015,
        flexDirection:"column"
    }
});
export default ChatTranDetail;
